/**
 * Created with hong.rong
 * Date:2020/07/27
 */

import React from 'react'
import classNames from 'classnames'
import { Input } from 'antd'
import { isFunction, isString, isNumber } from 'lodash'
import './index.less'

export default function DCTextArea({ value, onChange, ...rest }) {
  /**
   * 格式化输入的内容，并实时联动输入内容长度
   * @param text
   */
  const setFormattedContent = text => {
    if (isString(text) && isFunction(onChange)) {
      onChange(text)
    }
  }
  const wordLength = isString(value) ? value.length : 0
  return (
    <div
      className={classNames({
        'dc-text-area-with-extra': isNumber(rest.maxLength),
      })}
    >
      <Input.TextArea
        placeholder="请输入"
        {...rest}
        value={value}
        onChange={event => setFormattedContent(event.target.value)}
      />
      {isNumber(rest.maxLength) && (
        <div className="extra">
          {wordLength}/{rest.maxLength}
        </div>
      )}
    </div>
  )
}
